<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const healthData = ref({
  heartRate: 75,
  bloodPressure: 120,
  bloodSugar: 5.6,
  temperature: 36.8
})

const selectedItems = ref([])

onMounted(() => {
  initBarChart()
  initLineChart()
})

const initBarChart = () => {
  const barChart = echarts.init(document.getElementById('barChart'))
  const option = {
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }]
  }
  barChart.setOption(option)
}

const initLineChart = () => {
  const lineChart = echarts.init(document.getElementById('lineChart'))
  const option = {
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: { type: 'value' },
    series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }]
  }
  lineChart.setOption(option)
}
</script>

<template>
  <div class="monitor-container">
    <!-- 数据卡片区域 -->
    <div class="data-cards">
      <el-card class="data-card" shadow="hover">
        <div class="data-value">{{ healthData.heartRate }}</div>
        <div class="data-label">心率</div>
      </el-card>
      <el-card class="data-card" shadow="hover">
        <div class="data-value">{{ healthData.bloodPressure }}</div>
        <div class="data-label">血压</div>
      </el-card>
      <el-card class="data-card" shadow="hover">
        <div class="data-value">{{ healthData.bloodSugar }}</div>
        <div class="data-label">血糖</div>
      </el-card>
      <el-card class="data-card" shadow="hover">
        <div class="data-value">{{ healthData.temperature }}</div>
        <div class="data-label">体温</div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <el-card class="chart-card" shadow="hover">
        <div id="barChart" class="chart"></div>
      </el-card>
      <el-card class="chart-card" shadow="hover">
        <div id="lineChart" class="chart"></div>
      </el-card>
    </div>

    <!-- 表单选择区域 -->
    <div class="form-container">
      <el-card shadow="hover">
        <el-input placeholder="搜索指标" class="search-input" />
        <el-table :data="selectedItems" style="width: 100%">
          <el-table-column prop="name" label="指标名称">
            <template #default="scope">
              <div class="indicator-item">
                <span>{{ scope.row.name }}</span>
                <el-button type="primary" size="small" round>查看详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.monitor-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.data-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.data-card {
  border-radius: 15px;
  text-align: center;
  padding: 20px;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 10px;
}

.data-label {
  color: #606266;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  border-radius: 15px;
}

.chart {
  height: 300px;
  width: 100%;
}

.form-container {
  border-radius: 15px;
}

.search-input {
  margin-bottom: 20px;
  border-radius: 20px;
}

.indicator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
</style>
